<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p30 {
            /* 粘性定位  relative与fixed 的结合体; 
            在窗口没有滚动到位的时候定位是relative，滚动到设置了sticky的元素，元素是fixed
            */
            position: sticky;
            top: 0;
            background-color: aquamarine;
        }
    </style>
</head>

<body>

    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
        <p>段落6</p>
        <p>段落7</p>
        <p>段落8</p>
        <p>段落9</p>
        <p>段落10</p>
        <p>段落11</p>
        <p>段落12</p>
        <p>段落13</p>
        <p>段落14</p>
        <p>段落15</p>
        <p>段落16</p>
        <p>段落17</p>
        <p>段落18</p>
        <p>段落19</p>
        <p>段落20</p>
        <p>段落21</p>
        <p>段落22</p>
        <p>段落23</p>
        <p>段落24</p>
        <p>段落25</p>
        <p>段落26</p>
        <p>段落27</p>
        <p>段落28</p>
        <p>段落29</p>
        <p class="p30">段落30</p>
        <p>段落31</p>
        <p>段落32</p>
        <p>段落33</p>
        <p>段落34</p>
        <p>段落35</p>
        <p>段落36</p>
        <p>段落37</p>
        <p>段落38</p>
        <p>段落39</p>
        <p>段落40</p>
        <p>段落41</p>
        <p>段落42</p>
        <p>段落43</p>
        <p>段落44</p>
        <p>段落45</p>
        <p>段落46</p>
        <p>段落47</p>
        <p>段落48</p>
        <p>段落49</p>
        <p>段落50</p>
        <p>段落51</p>
        <p>段落52</p>
        <p>段落53</p>
        <p>段落54</p>
        <p>段落55</p>
        <p>段落56</p>
        <p>段落57</p>
        <p>段落58</p>
        <p>段落59</p>
        <p>段落60</p>
        <p>段落61</p>
        <p>段落62</p>
        <p>段落63</p>
        <p>段落64</p>
        <p>段落65</p>
        <p>段落66</p>
        <p>段落67</p>
        <p>段落68</p>
        <p>段落69</p>
        <p>段落70</p>
        <p>段落71</p>
        <p>段落72</p>
        <p>段落73</p>
        <p>段落74</p>
        <p>段落75</p>
        <p>段落76</p>
        <p>段落77</p>
        <p>段落78</p>
        <p>段落79</p>
        <p>段落80</p>
        <p>段落81</p>
        <p>段落82</p>
        <p>段落83</p>
        <p>段落84</p>
        <p>段落85</p>
        <p>段落86</p>
        <p>段落87</p>
        <p>段落88</p>
        <p>段落89</p>
        <p>段落90</p>
        <p>段落91</p>
        <p>段落92</p>
        <p>段落93</p>
        <p>段落94</p>
        <p>段落95</p>
        <p>段落96</p>
        <p>段落97</p>
        <p>段落98</p>
        <p>段落99</p>
        <p>段落100</p>
        <p>段落101</p>
        <p>段落102</p>
        <p>段落103</p>
        <p>段落104</p>
        <p>段落105</p>
        <p>段落106</p>
        <p>段落107</p>
        <p>段落108</p>
        <p>段落109</p>
        <p>段落110</p>
        <p>段落111</p>
        <p>段落112</p>
        <p>段落113</p>
        <p>段落114</p>
        <p>段落115</p>
        <p>段落116</p>
        <p>段落117</p>
        <p>段落118</p>
        <p>段落119</p>
        <p>段落120</p>
    </div>

    <!-- https://zz.5i5j.com/ershoufang/ -->
</body>

</html>